// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
// less
import './index.less'
import { showToast } from '../../../crossplatform/apiservice/toast'
import tool from '../../../util/tool'

class MessageInputWrap extends Component {
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }

  onTap = tool.throttle(() => {
    const {
      type,
      value,
      name,
      componenttype,
      maxLength,
      tip,
      settlement,
      read,
      readTitle
    } = this.props
    if (!read) {
      this.props.onChange({
        type,
        value,
        name,
        tip,
        componenttype,
        maxLength,
        settlement
      })
    } else {
      showToast({
        title: readTitle || '不可修改'
      })
    }
  })

  render() {
    const {
      name,
      value = '',
      componenttype,
      type,
      read,
      noBorder,
      jobStatus,
      partUnit = {}
    } = this.props
    let displayvalue = componenttype == 'textarea' ? (value.length > 0 ? ' ' : '') : value
    const valueReplace = typeof value === 'string' ? value.replace(/\s/g, ' ') : ''
    if (type == 'settlementSalary') {
      const settlementList = this.props.settlement.list
      const settlementValue = this.props.settlement.value
      const partSettlement = settlementList.find(e => e.value === parseInt(settlementValue))
      const partUnitName = partUnit.list.find(e => e.value === parseInt(partUnit.value))
      displayvalue = partSettlement ? `${partSettlement.name} ${value}${partUnitName.unit}/${partUnitName.name}` : ''
    }
    return (
      <View
        className={`MessageInputWrap_id70540 ${noBorder ? 'no-border' : ''}`}
        onClick={this.onTap}
      >
        <View className="Wrap">
          <View className="name">{name}</View>
          <View className={`inputls ${!displayvalue || read ? 'place-holder' : ''}`}>
            {jobStatus ? '' : displayvalue || '请输入'}
          </View>
          {componenttype == 'textarea' && value.length > 0 && (
            <Text className="textareals">{valueReplace || value}</Text>
          )}
          <Image
            className="imgright"
            src={`${
              read
                ? ''
                : 'https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png'
            }`}
          />
        </View>
      </View>
    )
  }
}

export default MessageInputWrap
